<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>情侣APP - 注册</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <!-- 注册界面 -->
        <div class="screen">
            <div class="screen-title">注册</div>
            <div class="login-screen">
                <div class="app-logo">
                    <i class="fas fa-heart"></i>
                </div>
                <h2 style="margin-bottom: 30px;">mua</h2>
                <input type="text" class="input-field" placeholder="用户名">
                <input type="text" class="input-field" placeholder="手机号码">
                <input type="password" class="input-field" placeholder="密码">
                <input type="password" class="input-field" placeholder="确认密码">
                <button class="btn" id="registerBtn">注册</button>
                <button class="btn btn-outline" id="backToLoginBtn">返回登录</button>
                <p class="text-center" style="margin-top: 20px; color: #888;">其他注册方式</p>
                <div style="display: flex; justify-content: center; gap: 20px; margin-top: 15px;">
                    <i class="fab fa-weixin" style="font-size: 24px; color: #4CAF50;"></i>
                    <i class="fab fa-qq" style="font-size: 24px; color: #1E88E5;"></i>
                    <i class="fab fa-weibo" style="font-size: 24px; color: #E53935;"></i>
                </div>
            </div>
        </div>
    </div>
    
    <script src="script.js"></script>
    <script>
        // 页面跳转逻辑
        document.getElementById('registerBtn').addEventListener('click', function() {
            alert('注册成功！');
            window.location.href = 'binding.html';
        });
        
        document.getElementById('backToLoginBtn').addEventListener('click', function() {
            window.location.href = 'index.html';
        });
    </script>
</body>
</html> 